<template>
    <view class="accountBind">
        <!-- <view class="dangqian_nbr">当前手机号码
            <text>130000000000</text>
        </view> -->
        <view class="dangqian_nbr">支付宝收款账号
        </view>
        <view class="bakcffff">
            <view class="bind_nbr">
                <text>账号</text>
                <input id="ali" placeholder="请输入支付宝账号" type="text" value="{{ali}}" bindinput="changeVal">
            </view>
            <view class="bind_nbr">
                <text>姓名</text>
                <input id="name" placeholder="请输入姓名" type="text" value="{{name}}" bindinput="changeVal">
            </view>
            <view class="dislpayTabcll">
                <view class="bind_nbr">
                    <text>验证码</text>
                    <input id="code" placeholder="请输入短信验证码" type="text" value="{{code}}" bindinput="changeVal">
                </view>
                <view class="huoqu">
                    <button @tap="sendMSGINfo()">获取验证码</button>
                </view>
            </view>
            <view class="button type_main" @tap="loginOut">绑定支付宝</view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import tip from '@/utils/tip';
    import utils from '@/utils/utils';
    import {
        USER_INFO, USER_SPECICAL_INFO,USER_ID
    } from '@/utils/constant';

    export default class accountBind extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '账号设置'    // 头部标题
        };
        components = {};

        data = {
            my_phone:'',
            ali:'',
            name:'',
            code:'',
            key:''
        };

        // 获取短信验证码
        async sendMSGToUser (data){
            api.sendSms({
                query: data
            }).then(function(res){
                if(res.data.code == "0"){
                    tip.toast("短信发送成功",null,"none");
                }else{
                    tip.toast("短信发送失败",null,"none");
                }
            })
        }        


        // 获取个人信息
        async user_info() {
            let that = this;
            let user_id = wepy.getStorageSync(USER_ID) || '';
            api.getUserInformation({
              query:{}
            },user_id).then(function(res){
              if(res.data.code == 0){
                that.my_phone = res.data.data.phone;
                that.$apply();
              }else{
                tip.error(res.data.msg)
              }
            })
        }

        // 绑定支付宝
        async bindAli (){
            let user_id = wepy.getStorageSync(USER_ID) || '';
            let _this = this;
            api.bindAliAcc({
                query: {
                    aliAcc:_this.ali,
                    name:_this.name,
                    smsCode:_this.code,
                    smsCodeKey:_this.key,
                    userId:user_id
                },
                method:'PUT'
            }).then(function(res){
                if(res.data.code == "0"){
                    wepy.navigateTo({
                      url: "/pages/personalCenter/setting"
                    })
                }else{
                    tip.error(res.data.msg)
                }
            })
        }

        // 获取支付宝信息
        async getAliAcc (){
            let that = this;
            let user_id = wepy.getStorageSync(USER_ID) || '';
            api.getAliAcc({
                query: {}
            },user_id).then(function(res){
                if(res.data.code == "0"){
                    that.ali = res.data.data.accName;  
                    that.name = res.data.data.realName;  
                    that.$apply();
                }else{
                    tip.toast("发生错误",null,"none");
                }
            })
        } 

        onLoad(){
            this.user_info();
            this.getAliAcc();
        }

        methods = {  // 方法
            changeVal(e){
                let self = this;
                switch(e.target.id){
                    case 'ali':
                    self.ali = e.detail.value;
                    break;

                    case 'name':
                    self.name = e.detail.value;
                    break;

                    case 'code':
                    self.code = e.detail.value;
                    break;

                    default:
                    break;
                }
            },
            sendMSGINfo(){
                let _that = this;
                _that.key = utils.getUUId()
                let _par = {
                    phone:this.my_phone,
                    key:_that.key,
                }
               _that.sendMSGToUser(_par);
            },
            loginOut(){
                let self = this;
                setTimeout(function() {
                    if(!self.ali){
                        return tip.toast("请输入支付宝账号",null,"none");
                    }else if(!self.name){
                        return tip.toast("请输入姓名",null,"none");
                    }else if(!self.code){
                        return tip.toast("请输入短信验证码",null,"none");
                    }
                    self.bindAli();
                },0)
            }
        };
        events = {};
    }

</script>
<style lang="less">
    .accountBind {
        .dangqian_nbr {
            padding: 20rpx 30rpx;
        }
        .bakcffff {
            background: #fff;
            padding: 20rpx;
            padding-bottom: 40rpx;
            > view {
                margin-top: 20rpx;
            }
        }
        .bind_nbr {
            border: 1px solid #ddd;
            border-radius: 2px;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            text {
                display: table-cell;
                padding-left: 30rpx;
                padding-right: 30rpx;
                vertical-align: middle;
                font-size: 26rpx;
                color: #333;
            }
            input {
                display: table-cell;
                vertical-align: middle;
                font-size: 26rpx;
            }
        }
        .huoqu {
            button {
                font-size: 26rpx;
                padding-top: 5rpx;
                padding-bottom: 5rpx;
                color: #fff;
                border: none;
                background: orange;
            }
        }
        .dislpayTabcll {
            .bind_nbr {
                width: 488rpx;
                display: table-cell;
                vertical-align: middle;
            }
            .huoqu {
                width: 220rpx;
                display: table-cell;
                vertical-align: middle;
                overflow: hidden;
                button {
                    width: 200rpx;
                    float: right;
                }
                image {
                    width: 200rpx;
                    height: 70rpx;
                    float: right;
                }
            }
        }
        .pad20 {
            padding: 0 20rpx;
        }
    }
</style>
